<template>
  <div class="add-product-container">
    <el-card class="form-card">
      <template #header>
        <div class="card-header">
          <span class="title">添加商品</span>
        </div>
      </template>

      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="100px"
        class="product-form"
      >
        <!-- 基本信息 -->
        <div class="form-section">
          <div class="section-title">基本信息</div>
          <el-form-item label="商品名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入商品名称" />
          </el-form-item>
          <el-form-item label="持有人名称" prop="curr_person_name">
            <el-input
              v-model="formData.curr_person_name"
              placeholder="请输入名称"
            />
          </el-form-item>

          <el-form-item label="商品价格" prop="price">
            <el-input-number
              v-model="formData.price"
              :precision="2"
              :step="0.1"
              :min="0"
              placeholder="请输入商品价格"
            />
          </el-form-item>
          <el-form-item label="商品材质" prop="material">
            <el-input
              v-model="formData.material"
              placeholder="请输入商品材质"
            />
          </el-form-item>
          <el-form-item label="商品颜色" prop="color">
            <el-input v-model="formData.color" placeholder="请输入商品颜色" />
          </el-form-item>
          <el-form-item label="商品样式" prop="style">
            <el-input v-model="formData.style" placeholder="请输入商品样式" />
          </el-form-item>
          <el-form-item label="商品规格" prop="specifications">
            <el-input
              v-model="formData.specifications"
              placeholder="请输入商品规格"
            />
          </el-form-item>

          <el-form-item label="商品类别" prop="category">
            <el-tree-select
              v-model="formData.category"
              :data="classTree"
              style="width: 200px"
              :props="{
                children: 'children',
                label: 'name',
                value: 'id'
              }"
            />
          </el-form-item>

          <el-form-item label="库存数量" prop="num">
            <el-input-number
              v-model="formData.num"
              :min="0"
              :step="1"
              placeholder="请输入库存数量"
            />
          </el-form-item>
        </div>

        <!-- 商品图片 -->
        <div class="form-section">
          <div class="section-title">商品图片</div>
          <el-form-item label="主图">
            <el-upload
              v-model:file-list="fileList"
              class="product-uploader"
              :show-file-list="false"
              :on-success="handleMainPicSuccess"
              action="http://localhost:2000/api/minio/uploadImages"
            >
              <img
                v-if="formData.picture"
                :src="formData.picture"
                class="uploaded-image"
              />
              <el-icon v-else class="uploader-icon"><plus /></el-icon>
            </el-upload>
          </el-form-item>

          <el-form-item label="轮播图" prop="carouselList">
            <el-upload
              v-model:file-list="carouselFileList"
              class="carousel-uploader"
              list-type="picture-card"
              :on-success="handleCarouselSuccess"
              action="http://localhost:2000/api/minio/uploadImages"
              multiple
            >
              <el-icon><plus /></el-icon>
            </el-upload>
          </el-form-item>

          <el-form-item label="详情图" prop="detailImageList">
            <el-upload
              v-model:file-list="detailFileList"
              class="detail-uploader"
              list-type="picture-card"
              :on-success="handleDetailSuccess"
              action="http://localhost:2000/api/minio/uploadImages"
              multiple
            >
              <el-icon><plus /></el-icon>
            </el-upload>
          </el-form-item>
        </div>

        <!-- 商品描述 -->
        <div class="form-section">
          <div class="section-title">商品描述</div>
          <el-form-item label="描述内容" prop="description">
            <el-input
              v-model="formData.productInfo.blemish"
              type="textarea"
              :rows="4"
              placeholder="请输入商品描述"
            />
          </el-form-item>
        </div>

        <!-- 操作按钮 -->
        <div class="form-actions">
          <el-button @click="resetForm">重置</el-button>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { getClassTree, Padd } from "../../api/product/product.js";
import { useRouter } from "vue-router";

const router = useRouter();

const formRef = ref(null);
const formData = ref({
  name: "",
  price: 0,
  color: "",
  category: "",
  material: "",
  curr_person_name: "",
  num: 0,
  picture: "",
  style: "",
  specifications: "",
  carouselList: [],
  detailImageList: [],
  productInfo: {
    blemish: ""
  }
});
const classTree = ref();
//主图上传
const fileList = ref([]);
const carouselFileList = ref([]);
const detailFileList = ref([]);

const rules = {
  name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
  price: [{ required: true, message: "请输入商品价格", trigger: "blur" }],
  category: [{ required: true, message: "请选择商品类别", trigger: "change" }],
  num: [{ required: true, message: "请输入库存数量", trigger: "blur" }],
  picture: [{ required: true, message: "请上传商品主图", trigger: "change" }],
  material: [{ required: true, message: "请输入商品材质", trigger: "blur" }],
  color: [{ required: true, message: "请输入商品颜色", trigger: "blur" }],
  style: [{ required: true, message: "请输入商品样式", trigger: "blur" }],
  specifications: [
    { required: true, message: "请输入商品规格", trigger: "blur" }
  ],
  curr_person_name: [
    { required: true, message: "请输入持有人名称", trigger: "blur" }
  ]
};

function handleMainPicSuccess(res) {
  if (res.code === 200) {
    formData.value.picture = res.data;
    ElMessage.success("上传成功");
  } else {
    ElMessage.error(res.msg || "上传失败");
  }
}

function handleCarouselSuccess(res) {
  if (res.code === 200) {
    formData.value.carouselList.push({
      carousel: res.data,
      product_id: null // 这个ID会在创建商品后设置
    });
    ElMessage.success("上传成功");
  } else {
    ElMessage.error(res.msg || "上传失败");
  }
}

function handleDetailSuccess(res) {
  if (res.code === 200) {
    formData.value.detailImageList.push({
      product_detail_image: res.data,
      product_id: null // 这个ID会在创建商品后设置
    });
    ElMessage.success("上传成功");
  } else {
    ElMessage.error(res.msg || "上传失败");
  }
}

// 表单操作
function submitForm() {
  formRef.value?.validate(valid => {
    if (valid) {
      // 提交表单逻辑
      console.log(formData.value);
      let res = Padd(formData.value);
      console.log(res);
      res.then(response => {
        if (response.code == 200) {
          console.log(response);
          ElMessage.success(response.message);
          router.push("/product/productList");
        } else {
          ElMessage.error(response.message);
        }
      });
    }
  });
}

function resetForm() {
  formRef.value?.resetFields();
  formData.value.carouselList = [];
  formData.value.detailImageList = [];
  fileList.value = [];
  carouselFileList.value = [];
  detailFileList.value = [];
  formData.value.description = "";
  formData.value.picture = "";
}
//初始化方法
function intit() {
  let res = getClassTree();

  res.then(response => {
    classTree.value = response.data;
  });
}
onBeforeMount(() => {
  intit();
});
</script>

<style scoped>
.add-product-container {
  padding: 20px;
  min-height: calc(100vh - 120px);
  /* 添加渐变背景 */
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
}

.form-card {
  max-width: 1000px;
  margin: 0 auto;
  border-radius: 8px;
  /* 添加卡片阴影和背景 */
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.product-form {
  padding: 20px 0;
}

.form-section {
  margin-bottom: 30px;
  padding: 20px;
  /* 修改区块背景 */
  background: linear-gradient(to right, #f8f9fa, #ffffff);
  border-radius: 8px;
  border: 1px solid #ebeef5;
  transition: all 0.3s ease;
}

.form-section:hover {
  /* 添加悬停效果 */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.section-title {
  margin-bottom: 20px;
  padding-left: 10px;
  border-left: 4px solid #409eff;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  /* 添加文字阴影 */
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
}

.product-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.8);
}

.product-uploader:hover {
  border-color: #409eff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.uploaded-image {
  width: 178px;
  height: 178px;
  display: block;
  object-fit: cover;
}

:deep(.el-upload--picture-card) {
  width: 148px;
  height: 148px;
  line-height: 148px;
  border-radius: 8px;
  border: 1px dashed #d9d9d9;
  background: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

:deep(.el-upload--picture-card:hover) {
  border-color: #409eff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.carousel-uploader,
.detail-uploader {
  :deep(.el-upload--picture-card) {
    width: 148px;
    height: 148px;
    line-height: 148px;
  }
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(235, 238, 245, 0.6);
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-input),
:deep(.el-select) {
  width: 100%;
  max-width: 400px;
}

:deep(.el-textarea__inner) {
  min-height: 120px;
}

:deep(.el-input__inner),
:deep(.el-textarea__inner) {
  border-radius: 4px;
  transition: all 0.3s ease;
}

:deep(.el-input__inner:focus),
:deep(.el-textarea__inner:focus) {
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

:deep(.el-tree-select) {
  width: 200px;
}

:deep(.el-select-dropdown__item) {
  transition: all 0.3s ease;
}

:deep(.el-select-dropdown__item.selected) {
  background-color: rgba(64, 158, 255, 0.1);
  color: #409eff;
}
</style>
